<template>
  <view class="page">
    <view class="tab-list">
      <view
        class="tab-item"
        v-for="item in paperClassList"
        :key="item.classId"
        :class="{ active: currentSelectPaperClassId === item.classId }"
        @click="handleTabClick(item)"
      >
        <text>{{ item.className }}</text>
        <view class="point" v-show="currentSelectPaperClassId === item.classId"></view>
      </view>
    </view>
    <view class="paper-list" v-if="paperList.length > 0">
      <view class="paper-item" v-for="item in paperList" :key="item.doPaperId" @click="viewDetail(item)">
        <view class="content">
          <view class="left">
            <view class="paper-name">{{ item.structureName }}</view>
            <view class="info">
              <view class="part">
                <text>正确\t</text>
                <text class="number success">{{ item.rightTopicNum }}</text>
                <text>\t题</text>
              </view>

              <view class="part">
                <text>|</text>
              </view>

              <view class="part">
                <text>错误\t</text>
                <text class="number error">{{ item.errorTopicNum }}</text>
                <text>\t题</text>
              </view>

              <view class="part">
                <text>|</text>
              </view>

              <view class="part">
                <text>得分\t</text>
                <text class="number primary">{{ item.totalScore }}</text>
                <text>\t分</text>
              </view>
            </view>
            <view class="info">
              <view>
                <text>答题时间：</text>
                <text>{{ item.doPaperTime }}</text>
              </view>
            </view>
            <!--            <view class="footer">-->
            <!--              <view class="btn info" @click.stop="viewDetail(item)">查看详情</view>-->
            <!--            </view>-->
          </view>
          <image :src="rightArrowIcon" class="right-icon"></image>
        </view>
      </view>
      <uni-load-more :status="loadMoreText"></uni-load-more>
    </view>
    <empty v-else height="calc(100vh - 80rpx)"></empty>
  </view>
</template>

<script>
import request from "@/utils/request"
import empty from "@/components/empty.vue"
import rightArrowIcon from "./assets/right-arrow.png"
import { handleUrlParams, valIsEmpty } from "@/utils"
import websocket from "@/utils/websocket"
import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"

export default {
  data() {
    return {
      paperList: [], //试卷列表
      paperClassList: [], //试卷分类列表
      currentSelectPaperClassId: "", //当前选中的试卷分类
      currentSelectPaperClassName: "", //当前选中的试卷分类名称
      rightArrowIcon: rightArrowIcon,
      pagination: {
        current: 1,
        size: 10,
      },
      loadMoreText: "more",
    }
  },
  onLoad(options) {
    if (!valIsEmpty(options.classId) && !valIsEmpty(options.className)) {
      this.currentSelectPaperClassId = Number.parseInt(options.classId)
      this.currentSelectPaperClassName = options.className
    }
    this.getPaperClassList()
  },
  onShow() {
    websocket.trackCurrentPage("我的刷题").catch(() => {})
  },
  components: { empty, uniLoadMore },
  methods: {
    // tab切换
    handleTabClick(item) {
      this.currentSelectPaperClassId = item.classId
      this.currentSelectPaperClassName = item.className
      this.resetPaginationReloadData()
    },
    //获取试卷分类
    getPaperClassList() {
      request({
        url: "topicClass/page",
        data: {
          current: 1,
          size: -1,
        },
        showLoading: true,
        errorHandle: true,
      }).then((data) => {
        this.paperClassList = data.records
        //默认选中第一个分类
        if (valIsEmpty(this.currentSelectPaperClassId)) {
          this.currentSelectPaperClassId = data.records[0].classId
        }
        this.resetPaginationReloadData()
      })
    },
    //获取试卷列表
    async getPaperList() {
			if (this.loadMoreText === "loading") {
				return
			}
			this.loadMoreText = "loading"
      const data = await request({
        url: "brushQuestions/getBrushQuestionsPage",
        data: {
          classId: this.currentSelectPaperClassId,
          ...this.pagination,
        },
        errorHandle: true,
      })
      this.paperList.push(...data.records)
			// 检查是否加载完数据
			if (this.paperList.length >= data.total) {
				this.loadMoreText = "noMore"
			} else {
				this.loadMoreText = "more"
			}
		},
    //重置分页并重新加载数据
    async resetPaginationReloadData() {
			this.pagination.current = 1
			this.paperList = []
			this.loadMoreText = "more"
			uni.showLoading({
				title: "加载中",
			})
			await this.getPaperList()
			uni.hideLoading()
		},
    //查看记录详情
    viewDetail(item) {
      uni.navigateTo({
        url: handleUrlParams("/pages/mine/myDoingRecord/recordDetail", {
          doPaperId: item.doPaperId,
          structureParentId: item.structureParentId,
          structureName: item.structureName,
        }),
      })
    },
  },
  //下拉刷新
  async onPullDownRefresh() {
    await this.resetPaginationReloadData()
		uni.stopPullDownRefresh()
  },
	//下拉到底加载下一页
	async onReachBottom() {
		if (this.loadMoreText === "more") {
			this.pagination.current++
			await this.getPaperList()
		}
	},
}
</script>

<style lang="scss" scoped>
.page {
  background: var(--gray-background-color);
  min-height: 100vh;
  .tab-list {
    display: flex;
    align-content: center;
    width: 100vw;
    padding: 20rpx 10rpx;
    overflow-x: auto;
    .tab-item {
      font-size: 30rpx;
      margin-left: 30rpx;
      position: relative;
      padding-bottom: 20rpx;
      min-width: max-content;
      &.active {
        color: var(--text-color-theme);
      }
      .point {
        position: absolute;
        bottom: 6rpx;
        height: 8rpx;
        width: 30%;
        left: 50%;
        transform: translateX(-50%);
        background: var(--theme-color);
        border-radius: 4rpx;
      }
    }
  }
  .paper-list {
    padding: {
      left: 30rpx;
      right: 30rpx;
      bottom: env(safe-area-inset-bottom);
    }
    .paper-item {
      padding: 30rpx;
      border-radius: 30rpx;
      background: var(--background-color);
      &:not(:first-child) {
        margin-top: 30rpx;
      }
      .content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          flex: 1;
          .paper-name {
            font-size: 34rpx;
            color: var(--text-color);
            font-weight: bold;
          }
          > .info {
            font-size: 30rpx;
            color: var(--text-color-light);
            margin-top: 20rpx;
            display: flex;
            justify-content: space-between;
            .number {
              font-weight: bold;
              &.success {
                color: #00a854;
              }
              &.error {
                color: #f04134;
              }
              &.primary {
                color: #2979ff;
              }
            }
          }
          .footer {
            margin-top: 20rpx;
            display: flex;
            .btn {
              padding: 6rpx 60rpx;
              border-radius: 30rpx;
              font-size: 28rpx;
              &.primary {
                background: #2874a6;
                color: #fff;
              }
              &.theme {
                background: var(--theme-color);
              }
              &.info {
                border: 2rpx solid var(--border-color);
              }
            }
          }
        }
        .right-icon {
          width: 30rpx;
          height: 30rpx;
          margin-left: 20rpx;
        }
      }
    }
  }
}
</style>
